<p-card class="flex-1 flex"
  styleClass="flex flex-1 flex-column">
  <ng-template pTemplate="header">
    <p-toolbar [style]="{'background-image': 'linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))' }">
      <div class="p-toolbar-group-start">
        <button pButton
          icon="pi {{leftSidebarIcon}}"
          class="mr-2 p-button-sm"
          (click)="onShowLeftSidebar()"></button>
        <button pButton
          icon="pi pi-save"
          class="mr-2 p-button-sm"
          label="保存"
          (click)="onSaveToCloud()"></button>
        <button pButton
          class="mr-2 p-button-sm"
          icon="pi pi-file-import"
          *ngIf="createNew"
          title="加载"
          (click)="onLoadScenarioFile()"
          label="加载">
        </button>
        <input type="file"
          #fileInput
          accept=".json"
          (change)="fileChangeEvent($event)"
          style="display: none;" />

        <button pButton
          *ngIf="!createNew"
          icon="pi pi-file-export"
          class="mr-2 p-button-sm"
          title="导出"
          label="导出"
          (click)="onDownloadFromCloud()"></button>
        <button pButton
          *ngIf="!createNew"
          class="p-button-sm mr-2"
          icon="pi pi-send"
          title="运行"
          label="运行"
          (click)="onRunScenario()"></button>
      </div>
      <div class="p-toolbar-group-center">
        <span *ngIf="scenario">{{scenario.Name}}</span>
      </div>
      <div class="p-toolbar-group-end">
        <p-button stuyleClass="mr-2"
          [text]="true"
          [disabled]="!canResetViewport"
          (click)="onResetViewport()"
          title="重置视图"
          icon="pi pi-slack">
        </p-button>
        <p-button icon="pi pi-cog"
          class="mr-2 p-button-sm"
          [link]="true"
          (click)="onEditScenario()"></p-button>
      </div>
    </p-toolbar>
  </ng-template>
  <div class="flex-1"
    class="graph-container"
    #graphContainer></div>
</p-card>
<app-control-lib #ctrlLib
  (startdrag)="startDrag($event)"></app-control-lib>
<app-scenario-setting #scenarioSetting
  (onHide)="onEditScenarioComplate()"></app-scenario-setting>
<app-pipline-setting #piplineSetting
  (onHide)="onEditComplate($event)"></app-pipline-setting>
<app-site-setting #siteSetting
  (onHide)="onEditComplate($event)"></app-site-setting>
<app-srm-setting #srmSetting
  (onHide)="onEditComplate($event)"></app-srm-setting>
<app-monitor-board-setting #boardSetting
  (onHide)="onEditComplate($event)"></app-monitor-board-setting>
<app-rgv-setting #rgvSetting
  (onHide)="onEditComplate($event)"></app-rgv-setting>